<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>孩童信息管理</title>

    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/chosen.jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="js/moment-timezone-with-data-2012-2022.min.js"></script>
    <script src="js/highlight.min.js"></script>
    <script src="js/tempusdominus-bootstrap-4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="js/materialize-inputs.jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/input-material.css">
    <link rel="stylesheet" href="css/bootstrap-chosen.css">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/highlight.min.css" rel="stylesheet">
    <link href="css/tempusdominus-bootstrap-4.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!--    <link rel="stylesheet" href="https://getbootstrap.com/assets/css/docs.min.css" />-->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/prim/edit.js"></script>


    <style>
        .top {
            margin-top: 5px;
        }

        .text-icon {
            font-family: "Microsoft YaHei", songti, sans-serif;
        }

        .info {
            margin-top: 25px;
            margin-left: 35px;
            padding: 10px;
        }
    </style>
</head>
<body>
<div th:include="head::myhead"></div>
<div class="container jumbotron top">
    <div class="row clearfix">
        <div class="col-md-5 column m-2 p-2">
            <div class="row">
                <img src="image/add_bg.png">
                <h5 class="text-center text-icon info"><span class="badge badge-pill badge-info">Info1</span>在此处添加孩童信息</h5>
                <h5 class="text-center text-icon info"><span class="badge badge-pill badge-info">Info2</span>在导航栏中选择发育分析</h5>
                <h5 class="text-center text-icon info"><span class="badge badge-pill badge-info">Info3</span>上传对应的DICOM图像</h5>
                <h5 class="text-center text-icon info"><span class="badge badge-pill badge-info">Info4</span>查看健康数据</h5>
            </div>

        </div>

        <div class="col-md-6 card m-2 p-2 column">
            <h5 class="text-center text-icon"><span class="badge badge-pill badge-primary">New</span>添加孩童信息</h5>
            <div class="text-warning text-center" th:text="${msg}"></div>
            <form action="/add" method="post" id="contact-form">
                <div class="form-group input-material">
                    <input type="text" class="form-control" id="name-field" name="youthName" required>
                    <label for="name-field">姓名</label>
                </div>
                <div class="form-group input-material">
                    <select id="sex-field" class="form-control chosen-select" name="sexId" required tabindex="2">
                        <option disabled selected>请选择性别</option>
                        <option value ="0">男</option>
                        <option value ="1">女</option>
                    </select>
                </div>
                <div class="form-group input-material">
                    <select id="nation-field" class="form-control chosen-select" name="nationId" required tabindex="2">
                        <option disabled selected>请选择民族</option>
                        <option value ="0">汉族</option>
                        <option value ="1">蒙古族</option>
                        <option value ="2">回族</option>
                        <option value ="3">藏族</option>
                        <option value ="4">维吾尔族</option>
                        <option value ="5">苗族</option>
                        <option value ="6">彝族</option>
                        <option value ="7">壮族</option>
                        <option value ="8">布依族</option>
                        <option value ="9">朝鲜族</option>
                        <option value ="10">满族</option>
                        <option value ="11">侗族</option>
                        <option value ="12">瑶族</option>
                        <option value ="13">白族</option>
                        <option value ="14">土家族</option>
                        <option value ="15">哈尼族</option>
                        <option value ="16">哈萨克族</option>
                        <option value ="17">傣族</option>
                        <option value ="18">黎族</option>
                        <option value ="19">僳僳族</option>
                        <option value ="20">佤族</option>
                        <option value ="21">畲族</option>
                        <option value ="22">高山族</option>
                        <option value ="23">拉祜族</option>
                        <option value ="24">水族</option>
                        <option value ="25">东乡族</option>
                        <option value ="26">纳西族</option>
                        <option value ="27">景颇族</option>
                        <option value ="28">柯尔克孜族</option>
                        <option value ="29">土族</option>
                        <option value ="30">达斡尔族</option>
                        <option value ="31">仫佬族</option>
                        <option value ="32">羌族</option>
                        <option value ="33">布朗族</option>
                        <option value ="34">撒拉族</option>
                        <option value ="35">毛南族</option>
                        <option value ="36">仡佬族</option>
                        <option value ="37">锡伯族</option>
                        <option value ="38">阿昌族</option>
                        <option value ="39">普米族</option>
                        <option value ="40">塔吉克族</option>
                        <option value ="41">怒族</option>
                        <option value ="42">乌孜别克族</option>
                        <option value ="43">俄罗斯族</option>
                        <option value ="44">鄂温克族</option>
                        <option value ="45">德昂族</option>
                        <option value ="46">保安族</option>
                        <option value ="47">裕固族</option>
                        <option value ="48">京族</option>
                        <option value ="49">塔塔尔族</option>
                        <option value ="50">独龙族</option>
                        <option value ="51">鄂伦春族</option>
                        <option value ="52">赫哲族</option>
                        <option value ="53">门巴族</option>
                        <option value ="54">珞巴族</option>
                        <option value ="55">基诺族</option>
                    </select>
                </div>
                <div class="form-group input-material">
                    <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" name="birth" placeholder="请选择出生日期"/>
                        <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
                <div class="form-group input-material">
                    <input type="text" class="form-control" id="id-field" name="idCard" required>
                    <label for="id-field">身份证号码</label>
                </div>
                <div class="form-group input-material">
                    <input type="text" class="form-control" id="address-field" name="address" required>
                    <label for="address-field">当前住址</label>
                </div>
                <div class="form-group input-material">
                    <input type="text" class="form-control" id="place-field" name="place" required>
                    <label for="place-field">籍贯</label>
                </div>
<!--                <div class="form-group input-material">-->
<!--                    <input type="number" class="form-control" id="h-height-field" name="height" required>-->
<!--                    <label for="h-height-field">当前身高(单位cm)</label>-->
<!--                </div>-->
                <div class="form-group input-material">
                    <input type="number" class="form-control" id="f-height-field" name="fHeight" required>
                    <label for="f-height-field">父亲身高(用于遗传身高计算)</label>
                </div>
                <div class="form-group input-material">
                    <input type="number" class="form-control" id="m-height-field" name="mHeight" required>
                    <label for="m-height-field">母亲身高(用于遗传身高计算)</label>
                </div>

                <div class="text-center">
                    <button type="submit" class="btn btn-primary">保存信息</button>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
    $('document').ready(function(){
        // enable material-style inputs in entire body
        $('body').materializeInputs();
        $('.chosen-select').chosen();
    });
    $(function () {
        $('#datetimepicker1').datetimepicker({
            format: 'L'
        });
    });


</script>
</body>
</html>